<template>
  <div class='play-list-content clearfix'>
    <div class="fl play-list">
      <div class="wrap">
        <!-- 专辑详情 -->
        <div class="wrap-con">
          <album-detail :albumContent=albumContentData :product=productData
          ></album-detail>
          <album-songs :albumContent=albumContentData></album-songs>
          <!-- 专辑评论 -->
          <comment :comment=commentData :albumContent=albumContentData></comment>
        </div>
      </div>
    </div>
    <div class="fr right-list">
      <!-- 喜欢这张专辑的人 -->
      <people-like-album :albumList=albumListData
      :collector=albumCollector ></people-like-album>
      <!-- Ta的其他热门专辑 -->
      <popular-album :relatedAlbum=relatedAlbum></popular-album>
    </div>
  </div>
</template>

<script>
import utils from '../../utils/common'
import albumDetail from './albumDetail'
import albumSongs from './albumSongs'
import comment from './comment'
import peopleLikeAlbum from './peopleLikeAlbum'
import popularAlbum from './popularAlbum'
export default {
  name: 'albumList',
  data() {
    return {
      albumListId: '', // 专辑 id
      albumListData: '', // 专辑详情: 作者、发布时间、专辑描述
      commentData: '', // 专辑评论
      albumCollector: '', // 喜欢这张专辑的人
      relatedAlbum: '', // 相关专辑推荐
      albumDynamicData: '', // 专辑动态: 收藏 评论 分享数量
      albumContentData: '', // 专辑内容
      productData: ''
    }
  },
  mounted() {
    this.albumListId = this.$route.query.id;
    this.getAlbumContent()
    this.getAlbumDetail()
    this.getAlbumComment()
    this.getAlbumtDynamic()
  },
  methods: {
    async getAlbumDetail() {
      let param = {
        id: this.albumListId
      }
      let self = this
      // 获取专辑详情
      try {
        let res = await this.$api.getAlbumtDetail(param)
        console.log('专辑详情',res)
        self.albumListData = res.data
        self.productData = res.data.product
        self.albumListData.product.pubTime = utils.formatDate(self.albumListData.product.pubTime)
      } catch(error) {
        console.log(error)
      }
    },
    async getAlbumContent() {
      // 获取专辑内容
      let param = {
        id: this.albumListId
      }
      let self = this
      try {
        let res = await this.$api.getAlbumtContent(param)
        if (res.data.code == 200) {
          self.albumContentData = res.data
          console.log('专辑内容', res)
        self.albumContentData.album.publishTime = utils.formatDate(self.albumContentData.album.publishTime)
        }
      } catch(error) {
        console.log(error)
      }
    },
    async getAlbumComment() {
      // 获取专辑评论
      let param = {
        id: this.albumListId
      }
      let self = this
      try {
        let res = await this.$api.getAlbumComment(param)
        if (res.data.code == 200) {
          self.commentData = res.data
        }
      } catch(error) {
        console.log(error)
      }
    },
    async getAlbumtDynamic() {
      // 获取专辑动态信息
      let param = {
        id: this.albumListId
      }
      // let self = this
      try {
        let res = await this.$api.getAlbumtDynamic(param)
        if (res.data.code == 200) {
          // self.commentData = res.data
        }
      } catch(error) {
        console.log(error)
      }
    }
  },
  components: {
    albumDetail,
    albumSongs,
    comment,
    peopleLikeAlbum,
    popularAlbum
  }
}
</script>

<style scoped lang='less'>
  .play-list-content {
    width: 1100px;
    height: auto;
    background-color: white;
    margin: 0 auto;
    .play-list {
      margin-right: -271px;
      width: 100%;
      height: auto;
      .wrap {
        margin-right: 270px;
        height: auto;
        .wrap-con {
          padding: 30px 30px 0 30px;
          height: calc(100% - 30px);
        }
      }
    }
    .right-list {
      width: 270px;
      height: 100%;
      border-left: 1px solid #e1e1e1;
    }
  }
  
</style>